@import '~breakpoint-sass/stylesheets/breakpoint';
@import "functions";
@import "variables";
@import "mixins";

body {
    font-size: map-get($grid-values, rem) * 1px;
    margin: 0;
}

.#{$prefix}-container {
    margin-left: auto;
    margin-right: auto;
    max-width: #{map-get(last($breakpoints), breakpoint)}rem;
}

.#{$prefix}-grid {
    align-items: flex-start;
    box-sizing: border-box;
    display: grid;
    flex-wrap: wrap;

    > * {
        box-sizing: border-box;
        height: 100%;
    }

    &.\--auto-rows {
        grid-template-rows: min-content;
    }

}

@each $current in $breakpoints {

    $break: map-get($current, breakpoint);
    $gutter: map-get($current, gutter);
    $margin: map-get($current, margin);
    $columns: map-get($current, columns);
    $height: map-get($current, row-height);

    @if ($margin != null and $margin > 0) {
        .#{$prefix}-container {
            @if first($breakpoints) == $current {
                margin-left: $margin;
                margin-right: $margin
            } @else if last($breakpoints) != $current {
                @include breakpoint(#{$break}rem) {
                    margin-left: $margin;
                    margin-right: $margin
                }
            } @else {
                @include breakpoint(#{$break}rem) {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: calc(#{$break}rem - #{$margin * 2});
                }
            }
        }
    }

    .#{$prefix}-grid {
        @if first($breakpoints) == $current {
            @include grid($columns, $rows, $height, $gutter);
        } @else {
            @include breakpoint(#{$break}rem) {
                @include grid($columns, $rows, $height, $gutter);
            }
        }
    }

}
